<template>
  <header :style="{ 'background-image': `url('${image}')` }" class="header">
    <div class="content">
      <div class="top-nav">
        <h2 class="logo">
          <a class="link" href="/">Kuan's Blog</a>
        </h2>
        <nav :class="{ visible: visible }" class="header-nav">
          <div
            @click="visible = false"
            @touchmove.prevent
            class="bg fadeIn"
          ></div>
          <ul>
            <li
              class="nav-li"
              v-for="(item, index) in navData"
              :key="item.name"
              @click="visible = false"
            >
              <a class="link" v-if="item.href" :href="item.href">{{
                item.title
              }}</a>
              <nuxt-link
                v-else
                class="link"
                :class="{ active: active === index }"
                :to="{ name: item.name }"
                >{{ item.title }}</nuxt-link
              >
            </li>
          </ul>
        </nav>
      </div>
      <div class="title-wrapper">
        <h1 class="mint-cell-title">{{ data.title }}</h1>
        <p class="param">{{ data.subTitle }}</p>
      </div>
      <div @click="menuClick" class="header-menu-btn"></div>
    </div>
  </header>
</template>

<script>
import { mapState } from "vuex";
import moment from "moment";

export default {
  data() {
    return {
      visible: false,
      navData: [
        { title: "首页", name: "index" },
        { title: "手册", name: "notebook" },
        // { title: '字体', href: 'http://www.luzhongkuan.cn/fonts/' },
        // { title: '留言', name: 'message' },
        { title: "关于", name: "about" },
        { title: "导航", href: "https://www.luzhongkuan.cn/web/collect/" }
      ]
    };
  },
  computed: {
    ...mapState(["detail"]),
    active() {
      const name = this.$route.name;
      return this.navData.findIndex(item => item.name === name);
    },
    image() {
      const { name } = this.$route;
      const images = {
        home: require("./images/home.jpg"),
        message: require("./images/message.jpg"),
        about: require("./images/about.jpg"),
        "detail-id": require("./images/detail.jpg"),
        notebook: require("./images/detail.jpg")
      };
      return images[name] || images.home;
    },
    data() {
      const { name } = this.$route;
      if (["detail-id"].includes(name)) {
        return {
          title: this.detail.title,
          subTitle: moment(this.detail.create_time).format(
            "YYYY-MM-DD HH:mm:ss"
          )
        };
      }

      const data = {
        notebook: {
          title: "操作手册",
          subTitle: "这里只是一些随手笔记！"
        },
        home: {
          title: "学海无涯苦作舟",
          subTitle: "这里只是一些随手笔记！"
        },
        message: {
          title: "今朝有酒今朝醉",
          subTitle: "新的一天，新的开始！"
        },
        about: {
          title: "为中华崛起而读书",
          subTitle: "这里只是一些随手笔记！"
        }
      };
      return data[name] || data.home;
    }
  },
  methods: {
    menuClick() {
      this.visible = !this.visible;
    }
  }
};
</script>

<style lang="scss" scoped>
@keyframes fadeCaleIn {
  from {
    transform: scale(0.6);
    opacity: 0.3;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.link {
  color: #eee;
  display: block;
}

.nav-li {
  list-style: none;
}

.header {
  background: url("./images/home.jpg") no-repeat center center;
  background-size: cover;
  height: 350px;
  color: #ddd;
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.3;
    position: absolute;
    filter: blur(10px);
  }
}

.content {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.top-nav {
  height: 50px;
}

.param {
  text-align: center;
}

.logo {
  font-size: 18px;
  float: left;
  padding-top: 15px;
}

.header-nav {
  float: right;
  padding-top: 8px;
  li {
    float: left;
    padding: 15px;
    font-size: 22px;
    .link {
      color: #eee;
      &:hover {
        color: #cecece;
      }
      &.active {
        color: #0a9ad0;
      }
    }
  }
}

.title-wrapper {
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 106px;
  font-size: 18px;
  .mint-cell-title {
    text-align: center;
    font-size: 45px;
    line-height: 90px;
  }
}

.header-menu-btn {
  display: none;
}

@media screen and (max-width: 768px) {
  .header {
    height: 200px;
  }
  .header-nav {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    left: 0;
    top: 0;
    &.visible {
      display: block;
    }
    li {
      font-size: 18px;
    }
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }
    ul {
      position: relative;
      z-index: 1;
      margin-top: 38px;
      margin-right: 4%;
      background: white;
      float: right;
      width: 130px;
      border-radius: 2px;
      animation: fadeCaleIn 0.3s ease-in-out;
      transform-origin: right top;
      padding: 5px 0;
      &:after {
        content: "";
        display: block;
        border-bottom: 6px solid white;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        position: absolute;
        right: 8px;
        top: -5px;
      }
    }
    li {
      float: none;
      padding-top: 8px;
      padding-bottom: 8px;
      .link {
        color: black;
      }
    }
  }
  .header-menu-btn {
    display: block;
    width: 18px;
    height: 16px;
    float: right;
    position: absolute;
    right: 0;
    top: 15px;
    z-index: 100;
    &:after,
    &:before {
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      background: white;
      position: absolute;
      bottom: 0;
    }
    &:before {
      top: 0;
      box-shadow: 0 7px 0 0 white;
    }
  }
  .title-wrapper {
    font-size: 14px;
    height: 70px;
    .mint-cell-title {
      text-align: center;
      font-size: 30px;
      line-height: 50px;
    }
  }
}
</style>
